import React, { Suspense, lazy } from 'react'
import '../assets/css/index.css'
import { Routes, Route, Navigate, Link, NavLink } from 'react-router-dom'
const Homer = lazy(() => import('../views/home'))
const Cate = lazy(()=>import('../views/cate')) 
const Cart = lazy(()=>import('../views/cart')) 
const Mine = lazy(()=>import('../views/mine')) 
class Home extends React.Component {
        render() {
                return (<div>
                        {/* 路由出口 */}
                        <Suspense>
                                <Routes>
                                        {/* 二级的path地址不需要加一级  但是url访问的时候它还是 一级/二级 */}
                                        <Route path='home' element={<Homer />}></Route>
                                        <Route path='cate' element={<Cate />}></Route>
                                        <Route path='cart' element={<Cart />}></Route>
                                        <Route path='mine' element={<Mine />}></Route>
                                        {/* 二级路由重定向 */}
                                        <Route path="" element={<Navigate to="home"></Navigate>}></Route>
                                </Routes>
                        </Suspense>


                        <div className='foot'>
                                <NavLink className={({ isActive }) => (isActive ? "select" : "")}
                                        to="/index/home">商城 </NavLink>
                                <NavLink className={({ isActive }) => (isActive ? "select" : "")}
                                        to="/index/cate">分类 </NavLink>
                                <NavLink className={({ isActive }) => (isActive ? "select" : "")}
                                        to="/index/cart">购物车 </NavLink>
                                <NavLink className={({ isActive }) => (isActive ? "select" : "")}
                                        to="/index/mine">我的 </NavLink>
                        </div>
                </div>)
        }
}
export default Home